<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>동적 리스트 뿌리기</title>
	
	<!--[[  Hybrid 베이스-->
	<script type="text/javascript" src="../../js/hybrid/hybrid.class.js"></script>
	<script type="text/javascript" src="../../js/hybrid/hybrid.common.js"></script>
	<!-- ]] -->
	
	<!--[[  JQuery Mobile -->
	<link rel="stylesheet"  href="../../js/jqm/jquery.mobile-1.0rc3.min.css" />
	<script src="../../js/jqm/jquery.js"></script>
	<script src="../../js/jqm/jquery.mobile-1.0rc3.min.js"></script>
	<!-- ]] -->
	



<!-- ]] -->

</head> 
<body> 

<div data-role="page" class="type-index">

	<div data-role="header" data-theme="a">
		<h1>Lists</h1>
		<a href="menu.html" data-icon="back" data-direction="reverse" class="ui-btn-left jqm-back">BACK</a>
	</div><!-- /header -->


<div data-role="content">
<ul data-role="listview" id="listview">
<!-- 여기에 동적으로 데이터가 들어갑니다 -->
</ul>
		
</div><!-- /content -->

<div data-role="footer" data-position="fixed">
     <h1>Fixed toolbars</h1>
</div><!-- /Footer -->


	<script type="text/javascript">

	var dataFile ="../../data/list-datafile.json";
    
    function start() {
    	hybrid.debug('start()','ready!!!');  
    	hybrid.file.load(dataFile);
    }
    
// hybrid.file.load 완료 후 처리     
	function processFileOK(ret) {

		//alert(ret);
		jsonData = JSON.parse(ret);

		//jQuery("ul li").remove(); // 참고 listview 지울때
		
		var ulNode = $("#listview");
	
		for (i=0;i < jsonData.body.count;i++) {

			var innerHTML = '<li><a href="'+jsonData.body.array[i].href +'">';
			innerHTML = innerHTML + '<img src="'+ jsonData.body.array[i].imgsrc + '"/>';
			innerHTML = innerHTML + '<h3>'+ jsonData.body.array[i].t1+'</h3>';
			innerHTML = innerHTML + '<p>'+ jsonData.body.array[i].t2 +'</p></a></li>';
		
			ulNode.append(innerHTML);	
		}
	
		ulNode.listview("refresh");	

	}
	
	start();

</script>

</div><!-- /page -->
</body>
</html>